<template>
    <div class="Expand">
        <van-tabs v-model="active" scrollspy sticky line-width="0px" line-height="0px">
            <van-tab v-for="item in content" :key="item.id">
                <template #title>
                    <div class="SceIcon">
                        <div>
                            <van-icon v-if="item.id === active" name="location" />
                        </div>
                        <div>
                            {{item.name}}
                        </div>
                    </div>
                </template>
                <div style="margin: 2rem">
                    {{item.content}}
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "SceSportExpand",
        data(){
            return{
                active: 0,
                content: []
            }
        },
        mounted() {
            axios.get("data/test.json").then( res => {
                this.content = res.data;
            })
        },


    }
</script>

<style scoped>
.van-tabs__nav, .van-tabs__nav--line, >>> .van-tab{
    font-size: 16px;
}
.van-tabs__nav, .van-tabs__nav--line, >>> .van-tab--active{
    color: rgb(1,150,255);
    font-weight: 500;
    font-size: 20px;
    margin-top: .1rem;
}

.Expand{
    position: absolute;
    width: 100%;
    border-top: .3rem solid #e4eefc;
}
.SceIcon{
    display: flex;
    justify-content: space-around;
}
</style>